<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电影推荐</title>
	<link rel="icon" href="images/logo2.png" >
	<link rel="stylesheet" href="/layui/css/layui.css"/>
	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
	<!-- CSS ================================================== -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<style type="text/css">
		.movie-block{
			/* position: absolute; */
		}
		.movie-gird{
			display: flex;
			justify-content:center;
			text-align: center;
		}
		li{
			list-style: none;
			margin-right: 10px;
		}	
	</style>
	
</head>
<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">
	  <div class="layui-header">
		<div class="layui-logo">睿道电影推荐</div>
		<ul class="layui-nav layui-layout-left">

		</ul>
		<ul class="layui-nav layui-layout-right">
		  <li class="layui-nav-item">
			<a href="javascript:;" id="userId">
				<img src="http://t.cn/RCzsdCq" class="layui-nav-img">
			</a>
			<script>
				var data = sessionStorage.getItem("userdId");
				document.getElementById("userId").innerText = data +" 欢迎登录";
			</script>
			<dl class="layui-nav-child">
			  <dd><a href="">基本资料</a></dd>
			  <dd><a href="">安全设置</a></dd>
			</dl>
		  </li>
		  <li class="layui-nav-item"><a href="login.html">退出</a></li>
		</ul>
	  </div>
	</div>
	
	<div class="layui-row layui-col-space10">
		<div class="layui-col-lg4">

		</div>
		<div class="layui-col-lg4">
		  <div>
			<form class="layui-form" action="">
				<div class="layui-form-item">
					<div class="layui-row layui-col-lg12" style="white-space: nowrap">
					  <label class="layui-form-label">电影</label>
					  <div class="layui-input-inline" style="width: 400px;">
						<input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="搜索电影" class="layui-input" id="searchMov"/>
					  </div>
					  <button type="button" class="layui-btn layui-icon layui-icon-search" id="searchBtn"></button>
					</div>
					<script type="text/javascript">
						$("#searchBtn").click(function(){
							var sp = $("#searchMov").val();
							if(sp == null || sp.length==0){
								alert("搜索不能为空");
								return;
							}
							var uri = encodeURI("searchMovList.html?movieName="+sp);
							window.location.href = uri;
						})
					</script>
				</div>
			</form>
		  </div>
		</div>
		<div class="layui-col-lg4">

		</div>
	</div>

	<div class="layui-row layui-col-space10">
		<div class="layui-col-lg3">

		</div>
		<div class="layui-col-lg6">
			<div class="movie-block">
				<ul id="ul1" class="movie-gird">
					<li>
						<div><img title='1' alt='电影封面' width='115px' height='164px' src='https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2282434035.jpg' /></div>
						<div><p>巴拉巴拉</p></div>
					</li>
					<li>
						<div><img title='1' alt='电影封面' width='115px' height='164px' src='https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2282434035.jpg' /></div>
						<div><p>巴拉巴拉</p></div>
					</li>
					<li>
						<div><img title='1' alt='电影封面' width='115px' height='164px' src='https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2282434035.jpg' /></div>
						<div><p>巴拉巴拉</p></div>
					</li>
					<li>
						<div><img title='1' alt='电影封面' width='115px' height='164px' src='https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2282434035.jpg' /></div>
						<div><p>巴拉巴拉</p></div>
					</li>
				</ul>
				<ul id="ul2" class="movie-gird">
					<li>
						<div><img title='1' alt='电影封面' width='115px' height='164px' src='https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2282434035.jpg' /></div>
						<div><p>巴拉巴拉</p></div>
					</li>
					<li>
						<div><img title='1' alt='电影封面' width='115px' height='164px' src='https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2282434035.jpg' /></div>
						<div><p>巴拉巴拉</p></div>
					</li>
					<li>
						<div><img title='1' alt='电影封面' width='115px' height='164px' src='https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2282434035.jpg' /></div>
						<div><p>巴拉巴拉</p></div>
					</li>
					<li>
						<div><img title='1' alt='电影封面' width='115px' height='164px' src='https://img1.doubanio.com/view/movie_poster_cover/lpst/public/p2260088337.jpg' /></div>
						<div><p>巴拉巴拉</p></div>
					</li>
				</ul>
			</div>
			
			<div class="pager-container" style="text-align: center; margin-left: 52px;">
				<nav aria-label="Page navigation">
					<ul class="pagination">
						<li>
							<a href="#" aria-label="Previous">
								<span aria-hidden="true">&laquo;</span>
							</a>
						</li>
						<li><a href="#">1</a></li>
						<li><a href="#">2</a></li>
						<li><a href="#">3</a></li>
						<li><a href="#">4</a></li>
						<li><a href="#">5</a></li>
						<li>
							<a href="#" aria-label="Next">
								<span aria-hidden="true">&raquo;</span>
							</a>
						</li>
					</ul>
				</nav>
			</div>

			<script type="text/javascript">
				var href = decodeURI(window.location.href);
				var movieName = href.split("?")[1].split("=")[1];
				var page1 = 1;
				var psize1 = 8;
				function page(pn,ps){
					console.log("pn"+pn);
					console.log("ps"+ps);
					console.log(movieName);
					page1 = pn;
					psize1 = ps;
					$.ajax({
						type:"get",
						url:"http://localhost:8888/getMovieByName.do",
						data:{
							"pageNum":pn,
							"pageSize":ps,
							"movieName":movieName
						},
						dataType:"json",
						success:function(response){
							console.log(response);
							var movies = response.data.list;
							$(".movie-gird").empty();
							// 分页数据
							for(var i=0;i<movies.length;i++){
								var li = $("<li></li>");
								li.append("<div><a target='_blank' href='recommend.html?movieId="+movies[i].movieId+"'><img title='"+movies[i].movieName+"' alt='Movies' width='115px' height='164px' src='"+movies[i].imgurl+"'/></a></div>");
								li.append("<div><p>"+movies[i].movieName+"</p></div>");
								if(i>=0 && i<=3){
									$("#ul1").append(li);
								}
								if(i>3 && i<=7){
									$("#ul2").append(li);
								}
							}
							// 分页导航栏
							var navs = response.data.navigatepageNums;
							$(".pagination").empty();
							$(".pagination").append("<li onclick='page("+(page1-1)+","+psize1+")'><a aria-label='Previous'><span aria-hidden='true'>&laquo;</span></a></li>");
							for(var i=0;i<navs.length;i++){
								$(".pagination").append("<li onclick='page("+navs[i]+","+psize1+")'><a>"+navs[i]+"</a></li>");
							}
							$(".pagination").append("<li onclick='page("+(page1+1)+","+psize1+")' ><a aria-label='Next'><span aria-hidden='true'>&raquo;</span></a></li>");
						}
					})
				}
				$(function(){
					page(page1,psize1);
				})
			</script>
		</div>
		<div class="layui-col-lg3">

		</div>
	</div>

	<script src="/layui/layui.js"></script>
	<script>
		layui.use(['jquery','layer','element'],function(){
		  var $=layui.jquery;
		  var layer=layui.layer;
		  var element = layui.element;
		  
		});
	</script>
</body>
</html>